<template>
	<view :style="{overflow: isOverflowHidden ? 'hidden' : '', width: '100vw', height: '100vh'}">
		<view class="sign-box">
			<scroll-view scroll-x="true" style="white-space: nowrap;height: 200rpx;position: relative;">
				<view class="sign-list">
					<view :class="['sign-item', current == i ? 'active' : '']" v-for="(item, i) in futureDates" :key="i" @tap="currentChange(i)">
						<view class="">{{ item.date }}</view>
						<view class="day">{{ item.desc }} </view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content-wrap">
			<view class="title-box">
				<view class="title-item">
					<view class="title" @tap="showPop">默认排序</view>
					<u-image width="14rpx" height="7rpx" src="/static/images/a39.png"></u-image>
				</view>
				<view class="title-item">
					<view class="title" @tap="showPopAll">全部科室</view>
					<u-image width="14rpx" height="7rpx" src="/static/images/a39.png"></u-image>
				</view>
			</view>
			<view class="count-list">
				<!-- 默认排序选择窗口 -->
				<view class="select-wrap" v-if="isShowPop">
					<view :class="['select-item', searchCurrent == i ? 'active-item' : '']" v-for="(item, i) in filterList" :key="i" @tap="changeSearchCurrent(i)">
						{{item.name}}
					</view>
				</view>
				<!-- 全部科室选择窗口 -->
				<view class="select-wrap-all" v-if="isShowPopAll">
					<view class="left">
						<scroll-view scroll-y="true" style="max-height: 50vh;width: 200rpx;">
							<view :class="['select-item', searchAllCurrent == i ? 'active-item' : '']" v-for="(item, i) in departmentNameList" :key="i" @tap="changeSearchAllCurrent(i)">{{item.name}}</view>
						</scroll-view>
					</view>
					<view class="right">
						<scroll-view scroll-y="true" style="max-height: 50vh;width: 100%;">
							<view class="select-name-item">
								<view class="l-name">脑科</view>
								<view class="tag-item" v-for="(item, i) in 10" :key="i">
									发热
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				
				<view class="user-box" v-for="(item, i) in 10" :key="i">
					<view class="btn">
						<u-button throttleTime="1000" :customStyle="{height: '56rpx', width: '210rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
							color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goConfirm">立即预约</u-button>
							<!-- <u-button throttleTime="1000" :customStyle="{height: '56rpx', width: '210rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
								color="linear-gradient(315deg, #D8D8D8 0%, #BEBEBE 100%)" @click="goConfirm">约满</u-button> -->
					</view>
					<view class="userinfo">
						<u-avatar src="/static/images/avatar.png" size="116rpx"></u-avatar>
						<view class="content-box">
							<view class="name-box">
								<view class="name">李医生</view>
								<view class="tag">主任中医师</view>
							</view>
							<view class="name1">儿科专家</view>
						</view>
					</view>
					<view class="skill-box">
						擅长：儿童保健、呼吸、心血管、血液、肾脏、神
						经、内分泌与代谢、免疫感染与消化、内分泌与代谢、免疫感染与消化
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
    import {ref, reactive, readonly} from "vue"
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import {getFutureDates} from "@/utils/tool";

    const futureDates = getFutureDates()

    onLoad((evt) => {
        console.log(evt)
    })

	const current = ref(0)
	const currentChange = e => {
		current.value = e
        console.log('切换日期:', futureDates[e])
	}
	// 默认排序列表排序选择
	const isShowPop = ref(false)
	const searchCurrent = ref(0)
	const filterList = ref([
		{ name: '职称', id: 1 },
		{ name: '有号', id: 2 },
	])
	const showPop = () => {
		isShowPopAll.value = false
		isShowPop.value = !isShowPop.value
	}
	const changeSearchCurrent = e => {
		searchCurrent.value = e
		isShowPop.value = false
	}
	
	// 全部科室选择列表
	const isShowPopAll = ref(false)
	const searchAllCurrent = ref(0)
	const departmentNameList = ref([
		{name: '脑科', id: 0},
		{name: '五官科', id: 1},
		{name: '外科', id: 2},
		{name: '内科', id: 3},
	])
	const showPopAll = () => {
		isShowPop.value = false
		isShowPopAll.value = !isShowPopAll.value
	}
	const changeSearchAllCurrent = e => {
		searchAllCurrent.value = e
		// isShowPopAll.value = false
	}
	
	// 如果弹窗显示页面不可滚动
	const isOverflowHidden = computed(() => {
		return isShowPopAll.value || isShowPop.value
	})
	
	// 跳转医生主页
	const goConfirm = () => {
		uni.navigateTo({
			url: '/mine/reservation/userinfo'
		})
	}
</script>

<style lang="scss" scoped>
	.sign-box {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		.sign-list {
			padding: 40rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
			display: flex;
			align-items: center;
			.sign-item {
				@include center();
				flex-direction: column;
				padding: 16rpx 20rpx;
				font-size: 30rpx;
				color: #222222;
				border-radius: 10rpx;
				margin-right: 40rpx;
				.day {
					margin-top: 18rpx;
					color: #999999;
				}
			}
			.active {
				color: #FFFFFF;
				background: #516DDB;
				.day {
					color: #fff;
				}
			}
		}
	}

	.content-wrap {
		margin-top: 10rpx;

	}
	.title-box {
		position: relative;
		background: #FFFFFF;
		width: 100%;
		height: 110rpx;
		padding: 33rpx 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
		.title-item {
			display: flex;
			align-items: center;
			margin-right: 70rpx;
		}
		
		.title {
			font-size: 30rpx;
			color: #222222;
			margin-right: 12rpx;
		}
	}
	.count-list {
		position: relative;
		padding: 32rpx 26rpx;
		background: #FFFFFF;
		.select-wrap {
			position: absolute;
			width: 240rpx;
			height: 240rpx;
			left: 0;
			top: 0;
			background-color: #fff;
			padding: 40rpx 60rpx 0;
			z-index: 9;
			box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
			
		}
		
		.select-wrap-all {
			width: 100vw;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 999;
			box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			.left {
				width: 200rpx;
				background-color: #fff;
				padding: 40rpx 0 0;
			}
			.right {
				flex: 1;
				background: #F5F6F8;
				padding: 30rpx;
				.select-name-item {
					.l-name {
						color: #222222;
						font-size: 40rpx;
						margin-bottom: 30rpx;
					}
					.tag-item {
						width: 100%;
						height: 110rpx;
						background: #FFFFFF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						padding-left: 30rpx;
						color: #444444;
						font-size: 32rpx;
						line-height: 110rpx;
						margin-bottom: 18rpx;
					}
				}
			}
		}
		.select-item {
			font-size: 32rpx;
			color: #606672;
			margin-bottom: 50rpx;
			text-align: center;
		}
		.active-item {
			color: #516DDB;
			font-size: 40rpx;
		}
		
		.user-box {
			position: relative;
			padding: 30rpx 28rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(187,187,187,0.16);
			.btn {
				position: absolute;
				right: 23rpx;
				top: 60rpx;
				z-index: 99;
			}
		}
		.skill-box {
			margin-top: 14rpx;
			color: #606672;
			line-height: 50rpx;
		}
		.userinfo {
			@include center();
			.content-box {
				flex: 1;
				margin-left: 24rpx;

				.name-box {
					@include start();

					.name {
						font-size: 36rpx;
						color: #222222;
					}

					.tag {
						font-size: 24rpx;
						color: #606672;
						margin-left: 16rpx;
					}
				}

				.name1 {
					color: #516DDB;
					margin-top: 12rpx;
				}
			}
		}
	}
</style>
